<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>
	<title>Kaleidoscope</title>
	<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
	<meta http-equiv="content-language" content="en">
	<meta name="description" content="Javascript kaleidoscope for iPhone/iPod Touch">
	<meta name="keywords" content="iphone,ipod touch,ipod,touch,apple webapps,apple,webapps,graphic,design,visual,effect,animation,particle,code,javascript,canvas">
	<meta name="author" content="REZ">
	<meta name="generator" content="REZ">
	<meta name="version" content="0.4">
	<meta name="copyright" content="REZ 2008">
	<meta name="robots" content="all">
	<meta name="viewport" content="width=device-width,user-scalable=0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
	<style type="text/css">
	body  {margin:0;padding:0;background-color:#000000;color:#ffffff;font-size:0;-webkit-text-size-adjust:none;overflow:hidden}
	div   {margin:0;padding:0;position:absolute;font-size:0;overflow:hidden}
	.tap  {-webkit-tap-highlight-color:rgba(255,0,0,0.2);cursor:pointer}
	canvas{background-color:#000000;overflow:hidden}
	</style>
<!-- original http://www.chiptune.com/kaleidoscope/ -->

<script src="../canvas.vml.js"></script>
<script src="../canvas.js"></script>

<script type="text/javascript">


// calc fps
var begin = +new Date;
var fpscount = 0;


function $i(id) { return document.getElementById(id); }
function $c(code) { return String.fromCharCode(code); }

function get_screen_size() {
	var w=document.documentElement.clientWidth;
	var h=document.documentElement.clientHeight;
	return Array(w,h);
}

var n=1;

var canvas_x=10;
var canvas_y=10;
/*
var canvas_w=0;
var canvas_h=0;
 */
var canvas_w=600;
var canvas_h=600;
var context;
var margin=4;

var x,y;
var p_x,p_y;
var a=0;
var b=0;
var angle=Math.PI/180*8;
var color=0;
var limit1=Math.PI*1.5;
var limit2=Math.PI*1.79;
var c=new Array(6);
var d=new Array(6);
var r,e;
var fade;
var prv_x,prv_y,prv_x2,prv_y2;

var timeout;
var pause=false;
var fps=10;

var google_flag=true;
var google_ad_client='pub-5142607733332317';
var google_ad_slot='3925404519';
var google_ad_width=google_flag?234:0;
var google_ad_height=google_flag?60:0;

document.onkeypress=key_manager;

function init() {
	var screen=$i('screen');
	screen.style.display='block';
	screen.style.position='absolute';
	screen.style.left=canvas_x+'px';
	screen.style.top=canvas_y+'px';
	screen.style.width=canvas_w+'px';
	screen.style.height=canvas_h+'px';
	var shadebob=$i('shadebob');
	shadebob.style.position='absolute';
	shadebob.style.left=canvas_x+'px';
	shadebob.style.top=canvas_y+'px';
	shadebob.width=canvas_w;
	shadebob.height=canvas_h;
	context=shadebob.getContext('2d');

context.xFlyweight=1;
  context.canvas.width = canvas_w;
  context.canvas.height = canvas_h;

	document.body.style.width=(canvas_x+canvas_w)+'px';
	document.body.style.height=(canvas_y+canvas_h+60+margin*2)+'px';
	reset();
}

function reset() {
	clearTimeout(timeout);
	a=Math.random(0,1)*angle;
	b=Math.random(0,1)*angle;
	r=0;
	fade=32;
	for(var i=0;i<6;i++)
		{
		c[i]=Math.random(0,1)/2;
		d[i]=Math.random(0,1)/2;
		}
	radius=Math.round((canvas_w+canvas_h)/8);
	e=radius*0.2; /* 0.15 */
	p_x=Math.round(canvas_w/2);
	p_y=Math.round(canvas_h/2);
	x=(radius*c[0])*Math.cos(a*d[1])+(radius*c[2])*Math.sin(a*d[3])+(radius*c[4])*Math.sin(a*d[5]);
	y=(radius*c[5])*Math.sin(a*d[4])+(radius*c[3])*Math.cos(a*d[2])+(radius*c[1])*Math.cos(a*d[0]);
	anim();
}

function anim() {
	var a1=Math.cos(a*2);
	var a2=Math.cos(a*4);
	var a3=Math.cos(a);
	var a4=Math.sin(a);
	if(b>limit1&&b<limit2) {
		r+=radius*0.02*a1;
		prv_x=x;
		prv_y=y;
		x=prv_x2+r*a3;
		y=prv_y2+r*a4;
	} else {
		prv_x=x;
		prv_y=y;
		prv_x2=x;
		prv_y2=y;
		x=(radius*c[0])*Math.cos(a*d[1])+(radius*c[2])*Math.sin(a*d[3])+(radius*c[4])*Math.sin(a*d[5]);
		y=(radius*c[5])*Math.sin(a*d[4])+(radius*c[3])*Math.cos(a*d[2])+(radius*c[1])*Math.cos(a*d[0]);
	}
	var c3=16*Math.cos(a*10);
	var c1=Math.floor(56*Math.cos(a*angle*4)+c3);
	var c2=Math.floor(56*Math.sin(a*angle*4)-c3);
	context.lineCap='round';
	context.strokeStyle='rgba('+(192+c1)+','+(192+c2)+','+(192-c1)+','+(0.01-0.005*-a1)+')';
	context.lineWidth=e*1.4+e*0.8*a3;
	draw_line(p_x,p_y,prv_x,prv_y,x,y);
	context.lineWidth=e+e*0.8*a3;
	draw_line(p_x,p_y,prv_x,prv_y,x,y);
	context.strokeStyle='rgba('+(192+c1)+','+(192+c2)+','+(192-c1)+','+(0.06-0.03*-a1)+')';
	context.lineWidth=e*0.6+e*0.35*a3;
	draw_line(p_x,p_y,prv_x,prv_y,x,y);
	context.strokeStyle='rgba(0,0,0,0.06)';
	context.lineWidth=e*0.4+e*0.225*a3;
	draw_line(p_x,p_y,prv_x,prv_y,x,y);
	context.strokeStyle='rgba('+(192+c1)+','+(192+c2)+','+(192-c1)+','+(0.1-0.075*-a1)+')';
	context.lineWidth=e*0.2+e*0.1*a3;
	draw_line(p_x,p_y,prv_x,prv_y,x,y);
	context.strokeStyle='rgba(255,255,255,0.4)';
	context.lineWidth=e*(0.1-0.05*-a2);
	draw_line(p_x,p_y,prv_x,prv_y,x,y);
	a+=angle*Math.cos(b);
	b+=angle*0.1;
	if(b>limit1) {
		context.fillStyle='rgba(0,0,0,0.08)';
		context.fillRect(0,0,canvas_w,canvas_h);
	}
	if(b<limit2) timeout=setTimeout(anim,fps); else reset();
}

function draw_line(x,y,x1,y1,x2,y2) {
	context.beginPath();
	context.moveTo(x+x1,y+y1);
	context.lineTo(x+x2,y+y2);
	context.moveTo(x-x1,y+y1);
	context.lineTo(x-x2,y+y2);
	context.moveTo(x-x1,y-y1);
	context.lineTo(x-x2,y-y2);
	context.moveTo(x+x1,y-y1);
	context.lineTo(x+x2,y-y2);
	context.moveTo(x+y1,y+x1);
	context.lineTo(x+y2,y+x2);
	context.moveTo(x-y1,y+x1);
	context.lineTo(x-y2,y+x2);
	context.moveTo(x-y1,y-x1);
	context.lineTo(x-y2,y-x2);
	context.moveTo(x+y1,y-x1);
	context.lineTo(x+y2,y-x2);
	context.moveTo(x,y+x2);
	context.lineTo(x,y+x1);
	context.moveTo(x,y-x2);
	context.lineTo(x,y-x1);
	context.moveTo(x+x2,y);
	context.lineTo(x+x1,y);
	context.moveTo(x-x2,y);
	context.lineTo(x-x1,y);
	context.stroke();
	context.closePath();
}

function draw_dot(x,y) {
	context.beginPath();
	context.moveTo(x,y);
	context.lineTo(x+0.001,y);
	context.stroke();
	context.closePath();
}

function resize() {
/*
	canvas_w=get_screen_size()[0];
	canvas_h=get_screen_size()[1]-(google_flag?60+margin*2:0);
alert(canvas_w);
alert(canvas_h);
 */
	init();
}

function key_manager(evt) {
	evt=evt||event;
	var key=evt.which||evt.keyCode;
	var ctrl=evt.ctrlKey;
	switch(key) {
	case 27: case 13:
		pause=pause?false:true;
		if(pause) clearTimeout(timeout); else anim();
		break;
	case 32:
		reset();
		break;
	}
	top.status='$'+key+'='+$c(key);
}

function oncanvasready(canvases) {
    ctx = canvases[0].getContext("2d");

    resize();
}

/*
function switchBackend() {
    var n = window.name || "";

    if (!n) {
        window.name = "flash";
    } else {
        switch (n) {
        case "sl":      window.name = "flash"; break;
        case "flash":   window.name = "vml"; break;
        case "vml":     window.name = "sl"; break;
        }
    }
    location.reload(false);
}

function xboot() {
    uu.id("shadebob").className = window.name || "sl";
}
 */
</script>
</head>
<body>

<!-- <a href="javascript:reset()" class="tap"> -->
<!--
    <div id="screen" style="background-color:#000000;display:none">
 -->
    <div id="screen" style="background-color:#000000;">
        <canvas id="shadebob" width="600" height="600"></canvas>
    </div>
<!-- </a> -->

<!--
<input type="button" value="sl/flash/vml" onclick="switchBackend()" style="position:absolute;top:0;left:0;" />
 -->

</body></html>
